<template>
<div>
<div style=" margin-bottom:10px">
            <navigation />
        </div>
    <div>
        
        <div class="home_container">
            <!-- 顶部区域 -->

            <div class="background_box">
                <!-- 背景图片 -->

                <img src="../assets/background.png" />
                <!-- 头像区域 -->
                <div class="header_box">
                    <img
                        style="
                            width: 100%;
                            height: 100%;
                            background-color: white;
                            border-radius: 50%;
                        "
                        :src="url+user.header"
                        alt=""
                    />
                </div>
                <!-- 昵称&个性签名区域 -->
                <div class="nickname_box">
                    <span
                        style="font-size: 20px; font-weight: bold; color: white"
                        >{{user.nickname}}</span
                    >
                    <p style="font-size: 10px; width: 1000px; color: #e3e4e8">
                        不要把你的生命献给无知、平庸和低俗。
                    </p>
                </div>
                <!-- 按钮区域 -->
                <div class="btns">
                    <el-button type="primary" @click="open1">关注</el-button>
                    <el-button type="info" @click="open2">发消息</el-button>
                    <el-button
                        icon="el-icon-more"
                        circle
                        @click="open4"
                    ></el-button>
                </div>
            </div>

            <div class="main_box">
                <!-- 标签选择器 -->
                <div class="choose_box">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane>
                            <span slot="label" style="font-size: 20px">
                                <i class="el-icon-s-home"></i>
                                主页
                            </span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" style="font-size: 20px">
                                <i class="el-icon-s-promotion"></i>
                                动态
                            </span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" style="font-size: 20px">
                                <i class="el-icon-upload"></i>
                                投稿
                            </span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label" style="font-size: 20px">
                                <i class="el-icon-video-camera-solid"></i>
                                频道
                            </span>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <!-- 搜索框 -->
                <el-input
                    class="search_box"
                    v-model="input"
                    placeholder="搜索视频、动态"
                ></el-input>
                <i
                    class="el-icon-search"
                    style="transform: translate(565px, -2px)"
                ></i>
                <!-- 数据栏 -->
                <nav class="data_box">
                    <table style="text-align: center; font-size: 10px">
                        <tr>
                            <th><el-button type="text">关注数</el-button></th>
                            <th><el-button type="text">粉丝数</el-button></th>
                            <th><el-button type="text">获赞数</el-button></th>
                            <th><el-button type="text">播放数</el-button></th>
                            <th><el-button type="text">阅读数</el-button></th>
                        </tr>
                        <tr>
                            <td>71</td>
                            <td>16</td>
                            <td>121</td>
                            <td>4857</td>
                            <td>0</td>
                        </tr>
                    </table>
                </nav>
            </div>
            <div class="flaxone">
                <!-- 标签区域 -->
                <div class="vedio_box">
                    <div class="title_box">
                        <div class="vedio_title">
                            <el-link :underline="false">TA的视频</el-link>
                        </div>
                        <div class="vedio_choose">
                            <el-tabs
                                v-model="activeName"
                                @tab-click="handleClick"
                            >
                                <el-tab-pane
                                    label="最新发布"
                                    name="first"
                                ></el-tab-pane>
                                <el-tab-pane
                                    label="最多播放"
                                    name="second"
                                ></el-tab-pane>
                                <el-tab-pane
                                    label="最多收藏"
                                    name="third"
                                ></el-tab-pane>
                            </el-tabs>
                        </div>
                        <div class="vedio_button">
                            <el-row>
                                <el-button
                                    plain
                                    style="width: 80px; height: 24px"
                                >
                                    <i class="el-icon-caret-right">播放全部</i>
                                </el-button>
                                <el-button
                                    plain
                                    style="width: 55px; height: 24px"
                                >
                                    <i class="el-icon--right">更多></i>
                                </el-button>
                            </el-row>
                        </div>
                    </div>
                    <div class="flex_container" >
                        <div
                            class="flex_item"
                            v-for="item in list"
                            :key="item.id"
                            @click="selectBreak(item.id)"
                        >
                            <img
                                :src="url + item.header"
                                style="
                                    width: 160px;
                                    height: 100px;
                                    margin-bottom: -4px;
                                "
                            />
                            <div
                                style="
                                    width: 160px;
                                    height: 35px;
                                    margin-top: 6px;
                                    font-size: 12px;
                                    overflow: hidden;
                                "
                            >
                                {{ item.title }}
                            </div>
                            <div
                                style="
                                    width: 160px;
                                    height: 14px;
                                    margin-top: 6px;
                                    font-size: 12px;
                                "
                            >
                                <span
                                    ><i
                                        class="el-icon-video-camera"
                                        style="width: 72px"
                                        >{{ item.Clicks }}</i
                                    ></span
                                >
                                <span
                                    ><i class="el-icon-timer">{{
                                        item.date
                                    }}</i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flaxtwo">
                    <div class="auth_box">
                        <img
                            src="../assets/icon-auth.png"
                            style="width: 99px; height: 70px; float: left"
                        />
                        <div style="position: absolute">
                            <el-button
                                type="text"
                                style="
                                    font-size: 18px;
                                    margin-top: 5px;
                                    margin-left: 120px;
                                    color: #222;
                                "
                                >点此申请bilibili认证</el-button
                            >
                            <div
                                style="
                                    font-size: 12px;
                                    margin-top: -5px;
                                    margin-left: 120px;
                                    color: #99a2aa;
                                "
                            >
                                获得bilibili认证，享多重认证福利
                            </div>
                        </div>
                    </div>
                    <div style="padding-top: 10px">
                        <div class="create_box">
                            <div style="transform: translate(115px, 10px)">
                                <img
                                    src="../assets/icon_createCenters.png"
                                    style="width: 120px; height: 34px"
                                />
                            </div>
                            <el-button-group
                                style="transform: translate(21px, 25px)"
                            >
                                <el-button
                                    icon="el-icon-upload"
                                    style="width: 154px; height: 38px"
                                    >视频投稿</el-button
                                >
                                <el-button
                                    icon="el-icon-s-tools"
                                    style="width: 154px; height: 38px"
                                    >内容管理</el-button
                                >
                            </el-button-group>
                        </div>
                    </div>
                    <div style="padding-top: 10px">
                        <div class="live_box">
                            <div
                                style="
                                    width: 308px;
                                    height: 26px;
                                    border-bottom: 1px solid #e5e9ef;
                                    font-size: 14px;
                                    font-weight: 700;
                                    padding-top: 15px;
                                    transform: translate(21px, -5px);
                                "
                            >
                                直播间
                            </div>
                            <div
                                style="
                                    transform: translate(110px, 30px);
                                    font-size: 14px;
                                "
                            >
                                <i class="el-icon-video-camera-solid"></i>
                                <el-button class="live" type="text"
                                    >前往我的直播间</el-button
                                >
                                <i
                                    class="el-icon-arrow-right"
                                    style="font-size: 12px"
                                ></i>
                            </div>
                        </div>
                    </div>
                    <div style="padding-top: 10px">
                        <div class="text_box">
                            <div
                                style="
                                    width: 308px;
                                    height: 26px;
                                    border-bottom: 1px solid #e5e9ef;
                                    font-size: 14px;
                                    font-weight: 700;
                                    padding-top: 15px;
                                    transform: translate(21px, -5px);
                                "
                            >
                                公告
                            </div>
                            <div style="margin: 20px 0"></div>
                            <el-input
                                type="textarea"
                                placeholder="编辑我的空间公告"
                                v-model="textarea"
                                maxlength="150"
                                show-word-limit
                                style="
                                    width: 308px;
                                    height: 220px;
                                    transform: translate(21px, -15px);
                                    font-size: 12px;
                                "
                            >
                            </el-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import Navigation from "../components/Navigation.vue";

export default {
    components: { Navigation },
    data() {
        return {
            user:{},
            activeName: "second",
            input: "",
            text: "",
            textarea: "",
            list: [],
            pager: {
                token:"",
                _page: 1,
                _limit: 15,
            },
            url: process.env.VUE_APP_API_URL,
        };
    },
    created() {
        this.query();
        if(this.$route.query.allData){
            this.seles(decodeURIComponent(this.$route.query.allData).replace("\"","").replace("\"",""));
        }else{
            this.seles(window.sessionStorage.getItem("token"));
        }
    },
    methods: {
        seles(params){
            this.$api.__api_list_users_get_totoken(params).then((res)=>{
                this.user=res[0];
                this.pager.token=res[0].token;
                //console.log(res)
            })
        },
        logout() {
            window.sessionStorage.clear();
            this.$router.push("/login");
            this.$message("您已安全退出！");
        },
        handleClick(tab, event) {
            //console.log(tab, event);
        },
        open1() {
            this.$notify({
                title: "已关注",
                message: "感谢关注 ^_^ !",
                type: "success",
            });
        },
        open2() {
            this.$notify({
                title: "抱歉",
                message: "有什么话可以当面说哦",
                type: "warning",
            });
        },
        open4() {
            this.$notify.error({
                title: "错误",
                message: "去其他地方看看吧",
            });
        },
        query() {
            this.$api.__api_list_video_get(this.pager).then((response) => {
                this.list = response;
            });
        },
        selectBreak: function (a) {
            let objData = JSON.stringify(a);
            this.$router.push({
                path: "/video",
                query: { allData: encodeURIComponent(objData) },
            });
            //console.log(objData);
        },
    },
};
</script>

<style scoped>
.home_container {
    width: 1285px;
    background-color: white;
    height: 100%;
    margin: auto;
    left: 0;
    display: flex;
    flex-direction: column;
}
.background_box {
    width: 1285px;
    height: 200px;
    border: 1px solid #e4e7ed;
    position: relative;
}
.header_box {
    height: 85px;
    width: 85px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 1px;
    position: absolute;
    transform: translate(5px, -100px);
    background-color: white;
}
.nickname_box {
    transform: translate(100px, -85px);
}
.btns {
    width: 1275px;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    transform: translate(0px, -115px);
}
.main_box {
    width: 1285px;
    height: 70px;
    border: 1px solid #e4e7ed;
    position: relative;
}
.choose_box {
    position: absolute;
    transform: translate(20px, 31px);
}
.data_box {
    position: relative;
    margin-left: 1030px;
    margin-top: -30px;
}
/* 深度修改样式 */
.choose_box >>> .el-tabs__item {
    padding: 0 20px;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    position: relative;
    margin-bottom: 10px;
    margin-top: -10px;
}
.search_box >>> .el-input__inner {
    border-radius: 40px;
    transform: translate(440px, 25px);
    width: 150px;
    height: 35px;
}
.data_box >>> .el-button--text {
    width: 45px;
    padding: 0;
    font-size: 10px;
}
.vedio_title >>> .el-link {
    font-size: 25px;
    position: absolute;
    transform: translate(0px, 8px);
}
.vedio_button >>> .el-button {
    transform: translate(730px, 20px);
}
.vedio_button >>> i {
    transform: translate(-12px, -6px);
    font-size: 10px;
}
.text_box >>> .el-textarea__inner {
    height: 225px;
}
.vedio_box {
    width: 925px;
    height: 646px;
    border: 1px solid #e4e7ed;
    position: relative;
}
.title_box {
    width: 880px;
    height: 50px;
    margin-left: 19px;
    margin-top: 14px;
}
.vedio_choose {
    position: absolute;
    transform: translate(130px, 11px);
}
.flex_container {
    width: 880px;
    height: 590px;
    margin-left: 19px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
.flex_item {
    width: 160px;
    height: 164px;
    margin: 5px;
    border: 1px solid #e4e7ed;
    height: 180px;
}
.auth_box {
    width: 350px;
    height: 70px;
    border: 1px solid #e4e7ed;
    position: relative;
}
.create_box {
    width: 350px;
    height: 125px;

    border: 1px solid #e4e7ed;
    position: relative;
}
.live_box {
    width: 350px;
    height: 130px;
    border: 1px solid #e4e7ed;
    position: relative;
}
.live {
    color: black;
}
.live:hover {
    color: #42a7d7;
}
.text_box {
    width: 350px;
    height: 285px;
    border: 1px solid #e4e7ed;
    position: relative;
}
.flaxone {
    display: flex;
    padding-top: 10px;
}
.flaxtwo {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}
</style>
